<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '基础数据'}, {name: '提货地点'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px;">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100" @click="add(0)">
                    新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list"
                      default-expand-all :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column label="地址">
                    <template slot-scope="scope">
                        <span class="mr-5">{{ scope.row.province }}</span>
                        <span class="mr-5">{{ scope.row.city }}</span>
                        <span class="mr-5">{{ scope.row.district }}</span>
                        <span>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="contact" label="联系人" width="150"></el-table-column>
                <el-table-column prop="mobile" label="联系电话" width="150"></el-table-column>
                <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                <!--        <el-table-column label="状态" width="180">-->
                <!--          <template slot-scope="scope">-->
                <!--            <el-button  v-preventDbClick size="mini" v-if="scope.row.status==1" type="success" plain>正常</el-button>-->
                <!--            <el-button  v-preventDbClick size="mini" v-if="scope.row.status==2" type="danger" plain>禁用</el-button>-->
                <!--          </template>-->
                <!--        </el-table-column>-->
                <el-table-column fixed="right" border width="120" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑" @click="edit(scope.row)"
                                   type="primary" icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除"
                                   @click="del(scope.row.id)" type="warning" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--      <el-alert class="mt-15" title="排序的数值越大，越靠前" type="success"></el-alert>-->
        </div>

        <el-dialog :title="editId?'编辑':'添加'" width="600px" :visible.sync="addDialogIsShow">
            <div class="add-box">
                <div class="flex-center mb-15">
                    <span class="span">省市县</span>
                    <div class="width-450">
                        <el-select @change="changeProvince" v-model="addobj.province_id" class="width-150"
                                   placeholder="省">
                            <el-option v-for="(item,index) in provinces" :key="item.id" :label="item.fullname"
                                       :value="item.id"></el-option>
                        </el-select>
                        <el-select @change="changeCity" v-model="addobj.city_id" style="width:140px;"
                                   class="ml-10 mr-10"
                                   placeholder="市">
                            <el-option v-for="(item,index) in citys" :key="item.id" :label="item.fullname"
                                       :value="item.id"></el-option>
                        </el-select>
                        <el-select @change="changeDistrict" v-model="addobj.district_id" style="width:140px;"
                                   placeholder="县">
                            <el-option v-for="(item,index) in districts" :key="item.id" :label="item.fullname"
                                       :value="item.id"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex-center mb-15">
                    <span class="span">详细地址</span>
                    <el-input placeholder="详细地址" class="width-450" v-model="addobj.address"></el-input>
                </div>
                <div class="flex-center mb-15">
                    <span class="span">联系人</span>
                    <el-input placeholder="联系人" class="width-450" v-model="addobj.contact"></el-input>
                </div>
                <div class="flex-center mb-15">
                    <span class="span">联系电话</span>
                    <el-input placeholder="联系电话" class="width-450" v-model="addobj.mobile"></el-input>
                </div>
                <div class="flex-center">
                    <span class="span">排序</span>
                    <el-input placeholder="数值越大，越靠前" class="width-450" v-model="addobj.sort"></el-input>
                </div>
                <!--        <div class="flex-center mt-15">-->
                <!--          <span class="span">状态</span>-->
                <!--          <el-select v-model="addobj.status" class="width-450" placeholder="请选择">-->
                <!--            <el-option label="正常" :value="1"></el-option>-->
                <!--            <el-option label="停用" :value="2"></el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button v-preventDbClick @click="addDialogIsShow=false">取 消</el-button>
        <el-button v-preventDbClick type="primary" @click="submit">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            list: [],
            editId: 0,
            addDialogIsShow: false,
            addobj: {
                province_id: '',
                city_id: '',
                district_id: '',
                address: '',
                contact: '',
                mobile: '',
                sort: '',
                //status: 1
            },
            provinces: [],
            citys: [],
            districts: [],
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.getData();
    },

    methods: {
        getProvince(callback) {
            request({
                url: '/manage/CompanyAddress/getDistrict',
            }).then((res) => {
                this.provinces = res.data;
                callback && callback();
            })
        },

        getCity(callback) {
            request({
                url: '/manage/CompanyAddress/getDistrict',
                data: {id: this.addobj.province_id}
            }).then((res) => {
                this.citys = res.data;
                callback && callback();
            })
        },

        getDistrict(callback) {
            request({
                url: '/manage/CompanyAddress/getDistrict',
                data: {id: this.addobj.city_id}
            }).then((res) => {
                this.districts = res.data;
                callback && callback();
            })
        },

        changeProvince() {
            this.getCity(() => {
                this.addobj.city_id = '';
                this.addobj.district_id = '';
                for (let i = 0; i < this.provinces.length; i++) {
                    if (this.addobj.province_id == this.provinces[i]['id']) {
                        console.log(this.provinces[i]['fullname']);
                        this.addobj.province = this.provinces[i]['fullname'];
                        break;
                    }
                }
            });
        },

        changeCity() {
            this.getDistrict(() => {
                this.addobj.district_id = '';
                for (let i = 0; i < this.citys.length; i++) {
                    if (this.addobj.city_id == this.citys[i]['id']) {
                        console.log(this.citys[i]['fullname']);
                        this.addobj.city = this.citys[i]['fullname'];
                        break;
                    }
                }
            });
        },

        changeDistrict() {
            for (let i = 0; i < this.districts.length; i++) {
                if (this.addobj.district_id == this.districts[i]['id']) {
                    console.log(this.districts[i]['fullname']);
                    this.addobj.district = this.districts[i]['fullname'];
                    break;
                }
            }
        },

        getData() {
            request({
                url: '/manage/companyAddress/all',
            }).then((res) => {
                this.list = res.data;
            })
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/companyAddress/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        add() {
            this.editId = 0;
            this.addobj.province_id = '';
            this.addobj.city_id = '';
            this.addobj.district_id = '';
            this.addobj.province = '';
            this.addobj.city = '';
            this.addobj.district = '';
            this.addobj.address = ''
            this.addobj.contact = ''
            this.addobj.mobile = ''
            this.addobj.sort = ''
            //this.addobj.status = 1
            this.addDialogIsShow = true;
            if (!this.provinces.length) {
                this.getProvince();
            }
        },

        edit(item) {
            this.editId = item.id;
            this.addobj.province_id = item.province_id;
            this.addobj.city_id = item.city_id;
            this.addobj.district_id = item.district_id;
            this.addobj.province = item.province;
            this.addobj.city = item.city;
            this.addobj.district = item.district;
            this.addobj.address = item.address;
            this.addobj.contact = item.contact;
            this.addobj.mobile = item.mobile;
            this.addobj.sort = item.sort;
            this.addDialogIsShow = true;
            if (!this.provinces.length) {
                this.getProvince();
            }
            this.getCity();
            this.getDistrict();
        },

        submit() {
            let addobj = Object.assign({}, this.addobj);
            if (this.editId) {
                addobj.id = this.editId;
                request({
                    url: '/manage/companyAddress/edit',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.addDialogIsShow = false;
                        this.getData();
                    })
                })
            } else {
                request({
                    url: '/manage/companyAddress/add',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.addDialogIsShow = false;
                        this.getData();
                    })
                })
            }
        }
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
